<template>
    <div class="wrapper fon_14 mar_t20">
        <div class="orderlist">
            <div class="ordercard" v-for="(item,index) in list" :key="index" :class="{ 'tuikuanColor': item.status=='invalid' || item.refundStatus=='successful'}">
                <div class="cardheader flex">
                    <div class="daysn" :class="{ 'tuikuanColor': item.status=='invalid' || item.refundStatus=='successful'}"> <span><span class="fon_14 fnormal">#</span>{{item.daySn}}</span></div>
                    <div class="flex-1 pad_10">
                        <div class="headertext fon_14 flex-bet">
                            <div>
                                <span v-if="item.orderBusinessType=='0'">
                                    <span class="yu" v-show="item.book">外卖 - 预</span>
                                    <span class="wei mar_r5" v-show="!item.book">立即送出</span>
                                    <span v-show="item.book && item.deliverTime" class="mar_lr5">预计送达时间{{item.deliverTime}}</span>
                                    <span class="mar_l5">
                                    <span class="mar_l10 color_9">({{item.createdAt.replace(/T/, " ")}}下单)</span>
                                    <span class="mar_l10 color_9">
                                        <span v-show="item.orderSourceTag=='ELEME'">饿了么订单</span>
                                        <span v-show="item.orderSourceTag=='STAR_PICK'">饿了么星选</span>
                                        <span v-show="item.orderSourceTag=='KOUBEI_APP'">口碑APP</span>
                                        <span v-show="item.orderSourceTag=='KOUBEI_ALIPAY'">支付宝中的口碑</span>
                                        <span v-show="item.orderSourceTag=='WECHAT_ORDER'">微信ka小程序</span>
                                    </span>
                                </span>
                                </span>
                                <span v-else>
                                    <span class="yu ziquyu" :class="{ 'tuikuanColor': item.status=='invalid' || item.refundStatus=='successful'}" v-show="item.orderBusinessType=='1' && item.book">自提 - 预</span>
                                    <span class="ziti ziqubor" :class="{ 'tuikuanColor': item.status=='invalid' || item.refundStatus=='successful'}" v-show="item.orderBusinessType=='1' && !item.book">自提</span>
                                    <span v-show="item.book && item.deliverTime" class="mar_lr5">预计到店时间：{{item.pickUpTime}}</span>
                                    <span class="mar_l10 color_9">({{item.createdAt}}下单)</span>
                                    <span class="mar_l10 color_9">
                                         <span v-show="item.orderSourceTag=='ELEME'">饿了么订单</span>
                                        <span v-show="item.orderSourceTag=='STAR_PICK'">饿了么星选</span>
                                        <span v-show="item.orderSourceTag=='KOUBEI_APP'">口碑APP</span>
                                        <span v-show="item.orderSourceTag=='KOUBEI_ALIPAY'">支付宝中的口碑</span>
                                        <span v-show="item.orderSourceTag=='WECHAT_ORDER'">微信ka小程序</span>
                                    </span>
                                </span>
                            </div>
                            <div class="pad_r_10">
                                <span v-if="item.status=='pending'">未付款</span>
                                <span v-if="item.status=='unprocessed'">未处理</span>
                                <span v-else-if="item.status=='unprocessed'">已付款</span>
                                <span v-else-if="item.status=='refunding'">退单中</span>
                                <span v-else-if="item.status=='valid'">已接单</span>
                                <span v-else-if="item.status=='settled'">已完成</span>

                                <span v-else-if="item.refundStatus=='noRefund'" class="mar_l5">订单取消</span>
                                <span v-else-if="item.refundStatus=='applied'" class="mar_l5">申请退单</span>
                                <span v-else-if="item.refundStatus=='rejected'" class="mar_l5">店铺拒绝退单</span>
                                <span v-else-if="item.refundStatus=='arbitrating'" class="mar_l5">客服仲裁中</span>
                                <span v-else-if="item.refundStatus=='failed'" class="mar_l5">退单失败</span>
                                <span v-else-if="item.refundStatus=='successful'" class="mar_l5">退单成功</span>

                            </div>
                        </div>
                    </div>
                </div>
<!--                <div class="pad_10 judan" v-show="item.refundType=='1' && item.state=='8' || item.state=='10' || item.state=='7'">-->
<!--                    <div v-show="item.refundType=='1' && item.state=='8'">商家拒单（原因：无）</div>-->
<!--                    <div v-show="item.refundType=='2' && item.state=='9'">用户申请退款（原因：无）</div>-->
<!--                    <div v-show="item.refundType=='3' && item.state=='7'">用户取消订单（原因：无）</div>-->
<!--                    <div v-show="item.refundType=='4' && item.state=='10'">商家未接单自动退款（原因：无）</div>-->
<!--                </div>-->
                <div class="mar_lr20 pad_tb_20 borderbottome7 flex flex-y-top" :class="{ 'tuikuanColor': item.status=='invalid' || item.refundStatus=='successful'}">
                    <div class="containertitle">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/user.svg"/>
                    </div>
                    <div class="flex-bet wid">
                        <div class="flex-g-1">
                            <div class="flex">
                                <div class="mar_r10 font_w700 lh1">{{item.consignee}}</div>
                                <span href="#" class="spanlink mar_r10 subjectcolor2" :class="{ 'tuikuanColor': item.status=='invalid' || item.refundStatus=='successful'}">{{item.consigneePhones}}</span>
                                <span class="color_8 mar_r10" v-show="item.superVip.indexOf('ELEME_SUPER_VIP')>-1">超级会员</span>
                                <span class="color_8 ">近180天第{{item.payNum}}次下单</span>
                            </div>
                            <div class="flex mar_t10" v-show="item.deliveryMode!=10">
                                <div>{{item.deliveryPoiAddress}}</div>
                                <a href="#" class="spanlink mar_l10"
                                   @click="openMap(item.deliveryGeo,item.deliveryPoiAddress)">查看地图</a>
                            </div>
                        </div>
                        <!--                        <div class="flex-g-0 spanlink">用户上次评价</div>-->
                    </div>
                </div>
<!--                <div class="borderbottome7 mar_lr20 pad_tb_20 flex" v-if="item.state>=3 && item.state<4">-->
<!--                    <div class="containertitle">-->
<!--                        <img class="wid ordericon mar_t5" src="@/assets/img/order/beican.png"/>-->
<!--                    </div>-->
<!--                    <div class="flex-bet wid">-->
<!--                        <div class="flex-g-1">-->
<!--                            备餐用时 <span ref="startTimer">1</span>-->
<!--                        </div>-->
<!--                        <div class="flex-g-0 spanlink">-->
<!--                            <el-button type="primary" round class="qrcc" @click="orderListQrch(item)">确认出餐</el-button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex">
                    <div class="containertitle" v-if="item.status=='valid'">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/peisong.svg"/>
                    </div>
                    <div class="flex-bet wid" v-if="item.status=='valid'">
                        <div class="flex-g-1">
                            <span class="color_2 font_w700">待配送</span>
                        </div>
                        <div class="flex-g-0 spanlink">
                            <el-button type="primary" class="qrsc"  @click="modifyOrder(item,'storeDelivery')">确认送出</el-button>
                        </div>
                    </div>
<!--                    <div class="flex-bet wid" v-if="item.state==4 && item.deliveryMode!=10">-->
<!--                        <div class="flex-g-1 flex-bet">-->
<!--                            <div class="color_2 font_w700">配送中</div>-->
<!--                            <div>{{item.deliveryName}}-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="flex-bet wid" v-if="item.status=='settled' && item.orderBusinessType!=1">
                        <div class="flex-g-1">
                            <span class="color_2 font_w700">已送达</span>
                        </div>
                    </div>
<!--                    <div class="flex-bet wid" v-if="item.deliveryMode==10">-->
<!--                        <div class="flex-g-1">-->
<!--                            <span class="color_2 font_w700">自提码：{{item.selfCode}}</span>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex flex-y-top">
                    <div class="containertitle">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/zhedie.svg"/>
                    </div>
                    <div class="flex wid">
                        <div class="flex-g-1">
                            <el-collapse accordion v-model="activeNames">
                                <el-collapse-item name="1">
                                    <template slot="title">
                                        <span class="color_2 font_w700">{{item.num}}件商品</span>
                                    </template>
                                    <div class="collapsemain">
                                        <div class="flex mar_b10">
                                            <div class="color-orange">备注：</div>
                                            <div class="mar_l5" v-if="item.description">{{item.description}}</div>
                                            <div class="mar_l5" v-else>无</div>
                                        </div>
                                        <div class="flex goods" v-for="(goods,pindex) in item.groups" :key="pindex">
                                            <div class="flex wid bordertop7">
                                                <div class="flex wid goodscon" v-for="(goodsgood,cpindex) in goods.items" :key="cpindex">
                                                    <div class="bflex-9">{{goodsgood.name}}
<!--                                                        <span v-show="goods.data">-{{goods.data}}</span>-->
<!--                                                        <span v-show="goods.material">【{{goods.material}}】</span>-->
<!--                                                        <span v-show="goods.attribute">【{{goods.attribute}}】</span>-->
                                                    </div>
                                                    <div class="bflex-1 color_5">X{{goodsgood.quantity}}</div>
                                                    <div class="bflex-1 color_5 t_r">{{goodsgood.price}}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex wid goodscon">
                                            <div class="bflex-4">总计</div>
                                            <div class="bflex-2 color_5"></div>
                                            <div class="bflex-1 color_5 t_r">{{item.originalPrice}}</div>
                                        </div>
                                        <div class="bordertop7 goods">
                                            <div class="mar_t10 fon_12 color_8">其他</div>
                                            <div class="flex wid goodscon">
                                                <div class="bflex-4">包装费</div>
                                                <div class="bflex-2 color_5"></div>
                                                <div class="bflex-1 color_5 t_r">{{item.packageFee}}</div>
                                            </div>
                                            <div class="flex wid goodscon">
                                                <div class="bflex-4">配送费</div>
                                                <div class="bflex-2 color_5"></div>
                                                <div class="bflex-1 color_5 t_r">{{item.deliveryMoney}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </div>
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex">
                    <div class="containertitle">
                        <img class="wid ordericon mar_t5" src="@/assets/img/order/shifu.svg"/>
                    </div>
                    <div class=" wid">
                        <div class="flex-bet">
                            <div class="flex-g-1">
                                <div class="color_2 rel">顾客实付
<!--                                <span class="ab tooltip">-->
<!--                                                    <el-tooltip class="item" effect="dark" placement="top-start">-->
<!--                                                    <div slot="content" class="tooltext">-->
<!--                                                        <div class="flex-bet"><p>新客立减：</p><p class="pad_l_30">{{item.newMoney}}</p></div>-->
<!--                                                        <div class="flex-bet"><p>门店满减：</p><p>{{item.preferentialMoney}}</p></div>-->
<!--                                                        <div class="flex-bet"><p>门店优惠券：</p><p>{{item.couponPreferential}}</p></div>-->
<!--                                                        <div class="flex-bet"><p>平台优惠券：</p><p>{{item.platformCouponPreferential}}</p></div>-->
<!--                                                        <div class="flex-bet"><p>配送费优惠：</p><p>{{item.deliveryPreferential}}</p></div>-->

<!--                                                    </div>-->
<!--                                                    <button type="button"-->
<!--                                                            class="el-button question-button-tooltip el-tooltip item el-button&#45;&#45;text fon_14 ab"-->
<!--                                                            style="right: -40px;top: -5px;">-->
<!--                                                        <span><i class="el-icon-question"></i></span>-->
<!--                                                    </button>-->
<!--                                                </el-tooltip>-->
<!--                                                </span>-->
                                </div>
                            </div>
                            <div class="flex-g-0 color_5 flex">
                                <div class="mar_r10">已支付</div>
                                <div class="font_w700"> ¥ {{item.totalPrice}}</div>
                            </div>
                        </div>
                        <div class="flex-bet mar_t10">
                            <div class="flex-g-1">
                                <div class="color_2 rel">本单预计收入
                                    <span class="ab tooltip">
                                                    <el-tooltip class="item" effect="dark" placement="top-start">
                                                    <div slot="content" class="tooltext">
                                                        <div class="flex-bet"><p>商品价格：</p><p class="pad_l_30">{{item.income-item.packageFee}}</p></div>
                                                        <div class="flex-bet"><p>配送费：</p><p>{{item.deliveryMoney}}</p></div>
                                                        <div class="flex-bet"><p>包装费：</p><p>{{item.packageFee}}</p></div>
<!--                                                        <div class="flex-bet"><p>满减优惠：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>优惠券优惠：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>新客立减：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>减免配送费：</p><p>-0.00</p></div>-->
<!--                                                        <div class="flex-bet"><p>平台服务费：</p><p>-0.00</p></div>-->
                                                        <div class="flex-bet"><p>本单收入：</p><p>{{item.income}}</p></div>
                                                    </div>
                                                    <button type="button"
                                                            class="el-button question-button-tooltip el-tooltip item el-button--text fon_14 ab"
                                                            style="right: -40px;top: -5px;">
                                                        <span><i class="el-icon-question"></i></span>
                                                    </button>
                                                </el-tooltip>
                                                </span>
                                </div>
                            </div>
                            <div class="flex-g-0 color_5 flex">
                                <div class="font_w700 color-red" :class="{ 'tuikuanColor': item.status=='invalid' || item.refundStatus=='successful'}"> ¥ {{item.income}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="borderbottome7 mar_lr20 pad_tb_20 flex">
                    <div class="containertitle">

                    </div>
                    <div class="flex-bet wid">
                        <div class="flex-g-1">
                            <div class="color_8 fon_12">下单时间: {{item.createdAt.replace(/T/, " ")}}</div>
                            <div class="color_8 fon_12">订单号: {{item.id}}</div>
                        </div>
                        <div class="flex-g-0 spanlink flex">
                            <div v-show="item.status=='unprocessed'">
                                <el-button plain class="qrsc" @click="modifyOrder(item,'rejection')">拒单</el-button>
                                <el-button class="qrsc" style="width: 150px;" type="primary" @click="modifyOrder(item,'receipt')">接单</el-button>
                            </div>
<!--                            <div v-show="item.state>3 && item.state<4">-->
<!--                                <el-button plain class="qrsc">取消订单</el-button>-->
<!--                            </div>-->
<!--                            <div v-show="item.state>2">-->
<!--                                <el-button plain class="qrsc" @click="modifyOrder(item,'print')">打印</el-button>-->
<!--                            </div>-->
<!--                            <div v-show="item.state==4 && item.deliveryMode==10" class="mar_l20">-->
<!--                                <el-button  @click="modifyOrder(item,'task')" class="elButtonFocus">自取提醒</el-button>-->
<!--                            </div>-->
<!--                            <div v-show="item.state==4 && item.deliveryMode!=10" class="mar_l20">-->
<!--                                <el-button  @click="modifyOrder(item,'confirm')" class="elButtonFocus">确认收货</el-button>-->
<!--                            </div>-->
<!--                            <div v-show="item.state==4 && item.deliveryMode==10" class="mar_l20">-->
<!--                                <el-button  @click="modifyOrder(item,'confirm')" class="elButtonFocus">确认收货</el-button>-->
<!--                            </div>-->
<!--                            <div v-show="item.state==3 || item.state==4" class="mar_l20">-->
<!--                                <el-button @click="modifyOrder(item,'refund')">退款</el-button>-->
<!--                            </div>-->
<!--                            <div v-show="item.state==9"  class="mar_l20">-->
<!--                                <el-button type="primary" class="qrsc" @click="modifyOrder(item,'adoptRefund')">同意退款</el-button>-->
<!--                                <el-button type="danger" class="qrsc" @click="modifyOrder(item,'refuseRefund')">拒绝退款</el-button>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
            <selectmap-dialog ref="selectmapDialog" :mapLng='form.lng' :mapLat='form.lat'
                              :mapAddress='form.address'></selectmap-dialog>
        </div>
    </div>
</template>

<script>
    import selectmapDialog from "@/plugins/selectmapDialog";
    import {modifyEleOrder} from "@/api/order";
    import { mapMutations } from 'vuex';
    export default {
        props: {
            list: {
                type: Array,
                // default: () => {
                //     return null;
                // },
            },
        },
        components: {selectmapDialog},
        created() {
            // this.timer = setInterval(this.startTimer, 1000);
        },
        name: "orderlist",
        data() {
            return {
                activeNames: '1',
                form: {
                    lng: 114.304692,
                    lat: 30.59331,
                    address: '湖北省武汉市',
                },
                timer: "",
                content: "",
                hour: 0,
                minutes: 0,
                seconds: 0
            }
        },
        methods: {
            ...mapMutations(['updataOrderNumber']),
            openMap(deliveryGeo, receivedAddress) {
                if(deliveryGeo){
                    var stringResult = deliveryGeo.split(',');
                }
                if (stringResult && receivedAddress) {
                    this.form.lat = +stringResult[1]
                    this.form.lng = +stringResult[0]
                    this.form.address = receivedAddress
                    this.$refs['selectmapDialog'].dialogVisible = true
                } else {
                    this.$baseMessage('请检查地址经纬度', 'warning');
                }
            },
            async modifyOrder(row, type) {
                if(type=='adoptRefund'){
                    // this.$baseConfirm("你确定退款吗", null, async () => {
                    //     const {msg} = await modifyOrder({'orderId': row.id, type,});
                    //     this.updataOrderNumber(JSON.stringify(new Date()))
                    //     this.$baseMessage(msg, "success");
                    //     this.$emit('initMethod')
                    // });
                }else {
                    const {msg} = await modifyEleOrder({'orderId': row.id, type,});
                    // this.updataOrderNumber(JSON.stringify(new Date()))
                    this.$baseMessage(msg, "success");
                    this.$emit('initMethod')
                }

            },
            orderListQrch(param,item){
                console.log('234',param,item)
            },
        }
    };
</script>
<style lang="scss">
    .el-collapse-item__header {
        height: 28px;
        line-height: 28px;
        border: none;
    }

    .el-collapse-item__wrap {
        border: none;
    }
</style>
<style lang="scss" scoped>
    /*订单详情*/
    .orderlist {
        position: relative;
        /*padding-bottom: 45px;*/
        flex: 1 1 0px;
    }

    .ordercard {
        color: rgb(45, 47, 51);
        word-break: break-all;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px;
        background: rgb(255, 255, 255);
        margin: 0px 0px 30px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(231, 235, 245);
        border-image: initial;
        border-radius: 4px;
        animation: 0.3s ease 0s 1 normal none running cardFadeIn-data-v-1bb63870;
    }

    .cardheader {
        font-size: 16px;
        line-height: 20px;
        min-height: 40px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background: rgb(240, 243, 249);
    }

    .cardheader .daysn {
        margin-left: 20px;
        min-width: 41px;
        font-size: 24px;
        font-weight: 700;
        padding: 0px 10px 0px 0px;
        color: #1989fa;
    }

    .column {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
    }

    .flex-1 {
        flex: 1 1 0px;
    }

    .yu {
        color: #fff;
        border-radius: 5px;
        padding: 5px 8px;
        background: #155BD4;
    }
    .ziquyu{
        background: #48B138;
        margin-right: 5px;
    }
    .ziqubor{
        border-radius: 5px;
        padding: 5px 8px;
        background: #48B138;
        color: #fff;
    }
    /*.ziti{*/
    /*    color: #FA5555;*/
    /*}*/

    .bordertop7 {
        border-top: 1px solid #e7ebf5;
    }

    .borderbottome7 {
        border-bottom: 1px solid #e7ebf5;
    }

    .containertitle {
        width: 50px;
    }

    .ordericon {
        width: 16px;
        height: 16px;
    }

    .qrcc, .qrsc {
        height: 40px;
        line-height: 14px;
    }

    .el-collapse {
        border: none;
    }

    .goods .goodscon {
        padding: 8px 0;
    }

    .goods .goodscon:hover {
        background: #f0f3f9;
    }

    .tooltip {
        top: -5px;
        left: 64px;
    }

    .tooltext {
        line-height: 28px;
        padding: 0 6px;
    }

    .el-button--text {
        color: rgb(45, 47, 51);
    }
    .judan{
        margin: 10px;
        background: #F0F3F9;
        color: #808595;
    }
    .tuikuanColor{
        color: #8C93A3 !important;
    }
    .elButtonFocus {
        color: #409EFF;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
    }
</style>
